<template>
  <div class="series_list">
    <div class="series_box">
      <div class="series_info cle">
        <div class="series_title">
          <strong><a href="/cat-33" target="_blank">绿茶</a></strong>
          <span>
                  <a href="/cat-44" target="_blank">龙井</a>
                  <a href="/cat-40" target="_blank">黄山毛峰</a>
                  <a href="/cat-51" target="_blank">碧螺春</a>
                  <a href="/cat-1025" target="_blank">雀舌</a>
                  <a href="/cat-1026" target="_blank">太平猴魁</a>
                  <a href="/cat-1027" target="_blank">安吉白茶</a>
                  <a href="/cat-1028" target="_blank">六安瓜片</a>
         </span>
        </div>
      </div>
      <div class="pro_list">
        <ul class="cle" >
          <li >
            <router-link to='info'>
            <a data-id="2997" class="a_buy">
              <p class="pic">
                <img width="150" height="150" alt="名茶之首  靠谱龙井1号 250g 高性价比"
                     src="http://img.tea7.com/0113415_0.jpeg?x-oss-process=image/resize,w_300"
                     title="名茶之首  靠谱龙井1号 250g 高性价比">
              </p>
              <p class="title">
                <small>登堂入室</small>
                名茶之首 靠谱龙井1号 250g 高性价比
              </p>
              <div class="btm cle">
                                    <span class="price" style="font-size:10px;">
                                        ￥<strong class="hrmb" style="font-size:16px;">68</strong>
                                    </span>
                <span class="jin">约136元/斤</span>
                <span data-id="2997" class="btn fr"  ><a href="#">立即购买</a></span>
              </div>
            </a>
          </router-link> </li>
          <li >
            <router-link to='info'>
            <a data-id="2999" class="a_buy">
              <p class="pic">
                <img width="150" height="150" alt="十大名茶  靠谱碧螺春1号 250g 高性价比"
                     src="http://img.tea7.com/0052268_0.jpeg?x-oss-process=image/resize,w_300"
                     title="十大名茶  靠谱碧螺春1号 250g 高性价比">
              </p>
              <p class="title">
                <small>登堂入室</small>
                十大名茶 靠谱碧螺春1号 250g 高性价比
              </p>
              <div class="btm cle">
                                    <span class="price" style="font-size:10px;">
                                        ￥<strong class="hrmb" style="font-size:16px;">68</strong>
                                    </span>
                <span class="jin">约136元/斤</span>
                <!--<span class="sales">
<i class="iconfont"></i>
872
</span>-->
                <span data-id="2999" class="btn fr">立即购买</span>
              </div>
            </a>
          </router-link> </li>
          <li >
            <router-link to='info'>
            <a data-id="3022" class="a_buy">
              <p class="pic">
                <img width="150" height="150" alt="鲜爽甘甜 雨前太平猴魁 125g"
                     src="http://img.tea7.com/0120105_0.jpeg?x-oss-process=image/resize,w_300" title="鲜爽甘甜 雨前太平猴魁 125g">
              </p>
              <p class="title">
                鲜爽甘甜 雨前太平猴魁 125g
              </p>
              <div class="btm cle">
                                    <span class="price" style="font-size:10px;">
                                        ￥<strong class="hrmb" style="font-size:16px;">99</strong>
                                    </span>
                <span class="jin">约396元/斤</span>
                <!--<span class="sales">
<i class="iconfont"></i>
503
</span>-->
                <span data-id="3022" class="btn fr">立即购买</span>
              </div>
            </a>
          </router-link> </li>
          <li >
            <router-link to='info'>
            <a data-id="3008" class="a_buy">
              <p class="pic">
                <img width="150" height="150" alt="高性价比历史名茶  黄山毛峰 1号 180克"
                     src="http://img.tea7.com/0052311_0.jpeg?x-oss-process=image/resize,w_300"
                     title="高性价比历史名茶  黄山毛峰 1号 180克">
              </p>
              <p class="title">
                <small>登堂入室</small>
                高性价比历史名茶 黄山毛峰 1号 180克
              </p>
              <div class="btm cle">
                                    <span class="price" style="font-size:10px;">
                                        ￥<strong class="hrmb" style="font-size:16px;">58</strong>
                                    </span>
                <span class="jin">约160元/斤</span>
                <!--<span class="sales">
<i class="iconfont"></i>
363
</span>-->
                <span data-id="3008" class="btn fr">立即购买</span>
              </div>
            </a>
          </router-link> </li>
          <li >
            <router-link to='info'>
            <a data-id="3182" class="a_buy">
              <p class="pic">
                <img width="150" height="150" alt="名茶之首 龙井2号 150g 清鲜爽滑"
                     src="http://img.tea7.com/0096731_0.jpeg?x-oss-process=image/resize,w_300"
                     title="名茶之首 龙井2号 150g 清鲜爽滑">
              </p>
              <p class="title">
                <small>略有小成</small>
                名茶之首 龙井2号 150g 清鲜爽滑
              </p>
              <div class="btm cle">
                                    <span class="price" style="font-size:10px;">
                                        ￥<strong class="hrmb" style="font-size:16px;">88</strong>
                                    </span>
                <span class="jin">约290元/斤</span>
                <!--<span class="sales">
<i class="iconfont"></i>
640
</span>-->
                <span data-id="3182" class="btn fr">立即购买</span>
              </div>
            </a>
          </router-link> </li>
          <li>
            <router-link to='info'> <a data-id="3618" class="a_buy">
              <p class="pic">
                <img width="150" height="150" alt="2019春茶 明前雀舌125g-珍贵到一年仅一批"
                     src="http://img.tea7.com/0123008_0.jpeg?x-oss-process=image/resize,w_300"
                     title="2019春茶 明前雀舌125g-珍贵到一年仅一批">
              </p>
              <p class="title">
                <small>炉火纯青</small>
                2019春茶 明前雀舌125g-珍贵到一年仅一批
              </p>
              <div class="btm cle">
                                    <span class="price" style="font-size:10px;">
                                        ￥<strong class="hrmb" style="font-size:16px;">158</strong>
                                    </span>
                <!--<span class="sales">
<i class="iconfont"></i>
195
</span>-->
              <span data-id="3618" class="btn fr" >立即购买</span>
              </div>
            </a>
            </router-link>   </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "series"
  ,methods:{

  }
  }
</script>

<style scoped>
  .pro_list li {
    float: left;
    width: 285px;
    border-bottom: 1px solid #eee;
    overflow: hidden;
    margin: 20px 20px 0 0;
    background-color: #fff;
    -ms-transition: all .6s;
    position:relative;
  }
  .pro_list li:nth-child(4n) { margin-right:0px;}

  .pro_list li .pic {
    text-align: center;
    padding: 15px 0;
    border-bottom: 1px solid #f0f0f0;
  }

  .pro_list li .pic img {
    width: 250px;
    height: 250px;
    vertical-align: top;
  }

  .pro_list li .title {
    color: #605046;
    font-size: 14px;
    height: 48px;
    line-height: 24px;
    overflow: hidden;
    margin: 6px 10px 16px;
  }
  .pro_list li .title small {
    height: 16px;
    line-height: 16px;
    padding: 0 5px;
    font-size: 12px;
    color: #fff;
    margin-right: 5px;
    background: #b0352f;
    border-radius: 2px;
  }
  .pro_list li .title img {
    position: absolute;
    width: 48px;
    height: 53px;
    left: 0;
    top: 0;
    margin-right: 5px;
    z-index: 1000;
  }

  .pro_list li .btm {
    margin: 0 10px; position:relative;
  }

  .pro_list li .btm span {
    color: #9e9e9e;
    margin-right: 14px;
    float: left;
  }

  .pro_list li .btm span.sales {
    float: right;
    margin-right: 10px; margin-top:3px;
  }
  .pro_list li .btm span.jin {
    float: left;
    margin-left: 10px;
    margin-top: 3px;
    border: 1px solid #ffd580;
    line-height: 14px;
    background: #ffffe5;
    padding: 0 3px;
    font-size: 12px;
    color: #b0352f;
  }
  .pro_list li .btm span.btn {
    position: absolute;
    bottom: 0px;
    right: -125px;
    _right: 0;
    border: none;
    width: 100px;
    height: 32px;
    text-indent: 200px;
    overflow: hidden;
    text-align: center;
    padding: 0;
    background: url("~@/assets/images/buy.png") no-repeat;
    z-index: 9999;
    -ms-transition: all .4s;transition: all .4s;
  }
  .pro_list li:hover .btm span.btn { right:-9px;
  }
  .pro_list li .btm span.price {
    color: #c3625d;
    font-size: 16px;
  }

  .pro_list li .btm span.price strong {
    font-weight: 800;
    font-family: arial;
  }

  .pro_list li .btm span i {
    font-size: 14px;
    margin-right: 3px;
  }

  .pro_list li a {
    display: block;
    height: 375px;
    cursor: pointer;
    padding-bottom: 15px;
    position: relative;
  }

  .pro_list li:hover {
    box-shadow: 0 3px 11.64px .36px rgba(0,0,0,.18),inset 0 -1px 0 0 rgba(240,240,240,.004);
  }
</style>
